<template>
    <div :class="`tech-shop-edit-address ${mode}`">
        <div class="form-container">
            <div class="form-item">
                <div class="form-label title-color">联系人</div>
                <div class="form-content">
                    <Field class="form-field" v-model="contactName" placeholder="姓名" @blur="inputOnBlur" />
                    <RadioGroup class="gender" v-model="gender">
                        <Radio class="gender-item" :style="`${gender === 'male' ? fontColor + borderThemeColor(.7) : ''}`" name="male">先生</Radio>
                        <Radio class="gender-item" :style="`${gender === 'female' ? fontColor + borderThemeColor(.7) : ''}`" name="female">女士</Radio>
                    </RadioGroup>
                </div>
            </div>
            <div class="form-item">
                <div class="form-label title-color">电话</div>
                <div class="form-content">
                    <Field class="form-field" v-model="contactMobile" type="number" placeholder="手机号码" :maxlength="11" @blur="inputOnBlur" />
                </div>
            </div>
            <div class="form-item">
                <div class="form-label title-color">地址</div>
                <div class="form-content" @click="chooseLocation">
                    <div :class="`address-value ${address ? '' : 'tip'}`">{{address || '选择收货地址'}}</div>
                    <MiniIcon name="right" :size="16" :mode="mode" :styleMode="styleMode" theme="#7D7D83" />
                </div>
            </div>
            <div class="form-item">
                <div class="form-label title-color">门牌号</div>
                <div class="form-content">
                    <Field class="form-field" v-model="streetNo" placeholder="详细地址，例：19幢1单元201" @blur="inputOnBlur" />
                </div>
            </div>
            <div class="form-item">
                <div class="form-label title-color">标签</div>
                <div class="form-content">
                    <div class="tag-list">
                        <template v-for="(item, idx) in tagList">
                            <div :key="idx" class="form-tag" :style="`${item.value === tag ? fontColor + borderThemeColor(.7) : ''}`" @click="() => selectTag(item.value)">{{item.value}}</div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
        <div class="action-btns">
            <Button v-if="!isEdit" class="submit-btn tech-btn" :style="themeBackround" :round="buttonRound" size="large" @click="addAddressAction">保存地址</Button>
            <div v-else class="btn-list">
                <Button class="submit-btn tech-btn" :style="themeBackround" :round="buttonRound" size="large" @click="editAddressAction">保存地址</Button>
                <Button class="submit-btn tech-btn" :round="buttonRound" size="large" @click="delAddressAction">删除地址</Button>
            </div>
            <Button class="submit-btn tech-btn" :round="buttonRound" size="large" @click="complateAction">取消</Button>
        </div>
        <SelectAddressLocation ref="selectLocation" @ensure="locationEnsure" />
    </div>
</template>

<script>
import { Cell, CellGroup, Radio, RadioGroup, Field, Button, Tag } from 'vant';
import { mapActions, mapState } from 'vuex';
import { TechCell, MiniIcon } from '@components/base';
import SelectAddressLocation from './components/SelectAddressLocation';

import { TipError } from '@common/tip';
import { validatePhone } from '@common/reg';
import { setTitle, inputBlurAction, navigateBack } from '@common/utils';
import { SHOP_ADDRESS_TAG } from '@constants/shop';
import { PageMixin } from '@common/mixin';
import logger from '@common/logger';
export default {
    name: 'ShopEditAddress', // 编辑地址
    mixins: [PageMixin],
    components: {
        Cell,
        CellGroup,
        Radio,
        RadioGroup,
        Field,
        Button,
        MiniIcon,
        Tag,
        SelectAddressLocation,
    },
    computed: {
        ...mapState({
            editAddressInfo: state => state.address.editAddressInfo,
        }),
        isEdit() {
            return this.editAddressInfo ? true : false;
        },
    },
    data() {
        return {
            addrId: '',
            contactName: '',
            contactMobile: '',
            gender: 'male',
            address: '',
            streetNo: '',
            cityCode: '',
            tag: '',
            latitude: '',
            longitude: '',
            tagList: SHOP_ADDRESS_TAG,
        };
    },
    mounted() {
        setTitle('地址详情');
        this.editAddressInfo && this.setDefaultValue(this.editAddressInfo);
    },
    methods: {
        ...mapActions([
            'addAddressItem',
            'updateAddressItem',
            'deleteAddressItem',
            'resetEditAddressInfo',
        ]),
        inputOnBlur() {
            inputBlurAction();
        },
        setDefaultValue(item) {
            this.addrId = item.addr_id;
            this.contactName = item.contact_name;
            this.contactMobile = item.contact_mobile;
            this.gender = item.gender;
            this.address = item.address;
            this.streetNo = item.street_no;
            this.cityCode = item.city_code;
            this.tag = item.tag;
            this.latitude = item.latitude;
            this.longitude = item.longitude;
        },
        chooseLocation() {
            this.$refs.selectLocation.show();
        },
        locationEnsure(info) {
            logger.info('EditAddress => 选择的地址为:', info);
            this.address = info.address + info.title;
            this.latitude = info.latitude;
            this.longitude = info.longitude;
            this.cityCode = info.city_code;
        },
        selectTag(tag) {
            logger.info('EditAddress => 选择的标签为:', tag);
            this.tag = tag;
        },
        complateAction() {
            Object.assign(this.$data, this.$options.data());
            // navigateBack();
            this.$router.back();
        },
        // 参数为空判断
        dealParam() {
            if (!this.contactName) {
                TipError('联系人姓名不能为空');
                return false;
            }
            if (!this.contactMobile || !validatePhone(this.contactMobile)) {
                TipError('手机号格式不正确');
                return false;
            }
            if (!this.address) {
                TipError('地址不能为空');
                return false;
            }
            if (!this.streetNo) {
                TipError('门牌号不能为空');
                return false;
            }
            return true;
        },
        getItem() {
            const item = {
                addr_id: this.addrId,
                contact_name: this.contactName,
                contact_mobile: this.contactMobile,
                gender: this.gender,
                address: this.address,
                street_no: this.streetNo,
                city_code: this.cityCode,
                tag: this.tag,
                latitude: this.latitude,
                longitude: this.longitude,
            };
            return item;
        },
        async addAddressAction() {
            if (this.dealParam()) {
                const item = this.getItem();
                await this.addAddressItem(item);
                this.complateAction();
            }
        },
        async editAddressAction() {
            if (this.dealParam()) {
                const item = this.getItem();
                this.resetEditAddressInfo();
                await this.updateAddressItem(item);
                this.complateAction();
            }
        },
        async delAddressAction() {
            await this.deleteAddressItem(this.addrId);
            this.complateAction();
        },
    },
};
</script>

<style lang="less">
.tech-shop-edit-address {
    .mode-white();
    height: 100vh;
    .flex-column();
    &.white {
        background-color: @shop-bg-color;
        .form-container {
            background-color: @white;
        }
    }
    &.black {
        .form-field,
        .address-value {
            color: @black-title-color;
        }
    }
    .form-container {
        background-color: @white;
        .m-v(@shop-bag-gap);
        .form-item {
            height: 48px;
            line-height: 48px;
            .flex();
            align-items: center;
            .p-h(@shop-gap-md);
            .border-line(@border-color, @shop-gap-md, 0);
            &:last-child {
                &::after {
                    height: 0;
                }
            }
            .form-label {
                width: 80px;
                font-size: @font-size-md;
                font-weight: 500;
                color: @text-color;
            }
            .form-content {
                flex: 1;
                .flex();
                width: calc(100% - 80px);
                justify-content: space-between;
            }
        }
    }
    .form-field {
        .p-h(0);
        &::after {
            display: none;
        }
    }
    .gender {
        .flex();
        height: 48px;
        align-items: center;
        .gender-item {
            .flex-center();
            width: 60px;
            height: 24px;
            border: 1px solid @tip-color;
            color: @tip-color;
            opacity: .7;
            border-radius: @border-radius / 2;
            .m-l(@shop-gap);
            .van-radio__input {
                display: none;
            }
            .van-radio__label {
                .m(0);
                font-size: @font-size;
            }
        }
    }
    .address-value {
        font-size: @font-size;
        .text-overflow();
        max-width: 85%;
        &.tip {
            color: @tip-color;
        }
    }
    .tag-list {
        .flex();
        .form-tag {
            .m-r(@shop-bag-gap);
            border-radius: @border-radius / 2;
            height: 24px;
            .p-v(0);
            .p-h(@shop-gap-md);
            line-height: 24px;
            font-size: @font-size;
            border: 1px solid rgba(125, 125, 131, 0.7);
            color: @tip-color;
        }
    }
    .action-btns {
        flex: 1;
        .p-h(@gap-md);
        .submit-btn {
            .m-t(@gap);
        }
    }
}
</style>
